<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-09-09 17:01:21
 * @LastEditors: dh
 * @LastEditTime: 2021-09-09 17:01:22
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>box-shadow实现霓虹氖灯文字效果</title>
	</head>

	<body>
		<div>
			<p class="pink">PINK</p>
		</div>
		<div>
			<p class="orange">Box-Shadow</p>
		</div>
		<div>
			<p class="yellow">YELLOW</p>
		</div>
		<style>
			body {
				background: #111;
				text-align: center;
			}

			p {
				display: inline;
				font-family: 'Lobster';
				text-align: center;
				font-size: 20vmin;
				line-height: 40vmin;
				color: #fff;
				cursor: pointer;
			}

			p:hover {
				color: #fff;
			}

			.pink {
				filter: brightness(110%);
				text-shadow:
					0 0 5px #fff,
					0 0 10px #fff,
					0 0 15px #fff,
					0 0 20px #e91e63,
					0 0 35px #e91e63,
					0 0 40px #e91e63,
					0 0 50px #e91e63,
					0 0 75px #e91e63;
				animation: pink 1.5s ease-in-out infinite alternate;
			}

			.orange {
				color: #ff5722;
			}

			.orange:hover {
				animation: orange 1.5s ease-in-out infinite alternate;
			}

			.yellow {
				color: #ffeb3b;
			}

			.yellow:hover {
				animation: yellow 1.5s ease-in-out infinite alternate;
			}

			@keyframes pink {
				to {
					text-shadow:
						0 0 10px #fff,
						0 0 20px #fff,
						0 0 30px #fff,
						0 0 40px #e91e63,
						0 0 70px #e91e63,
						0 0 80px #e91e63,
						0 0 100px #e91e63,
						0 0 150px #e91e63;
				}
			}

			@keyframes orange {
				to {
					text-shadow:
						0 0 10px #fff,
						0 0 20px #fff,
						0 0 30px #fff,
						0 0 40px #ff5722,
						0 0 70px #ff5722,
						0 0 80px #ff5722,
						0 0 100px #ff5722,
						0 0 150px #ff5722;
				}

				from {
					filter: brightness(110%);
					text-shadow:
						0 0 5px #fff,
						0 0 10px #fff,
						0 0 15px #fff,
						0 0 20px #ff5722,
						0 0 35px #ff5722,
						0 0 40px #ff5722,
						0 0 50px #ff5722,
						0 0 75px #ff5722;
				}
			}

			@keyframes yellow {
				to {
					text-shadow:
						0 0 10px #fff,
						0 0 20px #fff,
						0 0 30px #fff,
						0 0 40px #ffeb3b,
						0 0 70px #ffeb3b,
						0 0 80px #ffeb3b,
						0 0 100px #ffeb3b,
						0 0 150px #ffeb3b;
				}

				from {
					filter: brightness(110%);
					text-shadow:
						0 0 5px #fff,
						0 0 10px #fff,
						0 0 15px #fff,
						0 0 20px #ffeb3b,
						0 0 35px #ffeb3b,
						0 0 40px #ffeb3b,
						0 0 50px #ffeb3b,
						0 0 75px #ffeb3b;
				}
			}
		</style>
	</body>
</html>
